<template>
  <!-- <el-space direction="vertical"> -->
  <el-row :gutter="4" justify="start" style="min-width: 1366px; overflow: auto;">
    <el-col :span="4" 
      ><el-input v-model="searchText" size="default" placeholder="分类名"
    /></el-col>
    <el-col :span="2"
      ><el-button type="primary" @click="methods.requestData"
        >查找分类</el-button
      ></el-col
    >
    <el-col :offset="0" :span="2"
      ><el-button type="primary" @click="methods.handleAddEmployee"
        >添加分类</el-button
      ></el-col
    >
  </el-row>
    <el-table :data="pageData.res.records" style="width: 100%">
      <el-table-column label="名称" prop="name" />
      <el-table-column align="left" label="类型" prop="type">
        <template #default="scope">
        <el-tag v-if="scope.row.type === 1" >菜品</el-tag>
        <el-tag v-if="scope.row.type === 2" type="success" >套餐</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" prop="updateTime" >
        <template #default="scope">
          {{methods.convertDate(scope.row.updateTime)}}
        </template>
      </el-table-column>

      <!-- <el-table-column align="center" label="操作">
        <template #default="scope">
            <el-button v-if="scope.row.status ===1"
            size="small"
            type="warning"
            @click="methods.handleUpdateState(scope.row.id,0)"
            >禁用</el-button>
            <el-button v-if="scope.row.status ===0"
            size="small"
            type="success"
            @click="methods.handleUpdateState(scope.row.id,1)"
            >启用</el-button>
          <el-button
            size="small"
            type="danger"
            @click="methods.handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column> -->
    </el-table>

    <el-row :gutter="20">
      <el-col :span="12" :offset="6">
        <div class="pagination-block">
          <el-pagination
            background
            layout="total, prev, pager, next"
            :page-size="10"
            :total="totalCount"
            :current-page="currentPage"
            @current-change="methods.handlePageIndexChange"
          />
        </div>
      </el-col>
    </el-row>

    <el-dialog v-model="dialogFormVisible"  title="添加分类" style="width:400px">
    <category-edit @fatherFun='methods.getChildData' />
    <template #footer>
      
    </template>
  </el-dialog>

</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import dayjs, { Dayjs } from "_dayjs@1.11.6@dayjs";
import { categoryList } from "@/api/CategoryManage";
import {
  CategoryListReqForm,
  CategoryListResForm,
  CategoryListResListenObject,
} from "@/entity/entityDefine";
import { ElMessage } from "element-plus";
import CategoryEdit from "@/components/CategoryEdit.vue";

export default defineComponent({
  name: "CategoryManage",
  components: {
    CategoryEdit
  },
  mounted() {
    console.log("mounted");
    this.methods.requestData();
  },
  setup() {
    let dialogFormVisible = ref(false);
    let searchText = ref("");
    var currentPage = ref(1);
    let totalCount = ref(0);
    let pageSize = ref(10);

    let params: CategoryListReqForm = {
      page: 1,
      pageSize: 10,
      name: "",
    };
    let respData: CategoryListResForm = reactive({
      records: [],
      total: 0,
      size: 0,
      current: 0,
      pages: 0,
      searchCount: 0,
    });

    let pageData: CategoryListResListenObject = reactive({
      res: respData,
    });

    const methods = {

      getChildData(state:boolean ) {
        if(state) {
          dialogFormVisible.value = false;
          methods.requestData();
        }
      },

      handleAddEmployee() {
        //
        dialogFormVisible.value = true;
      },
      // handleUpdateState(id:string, status: number) {
      //   //
      //   methods.updateEmployeeState(id,status);
      // },
      handleEdit(inex: any, row: any) {
        //
      },
      handleDelete(inex: any, row: any) {
        //
      },

      handlePageIndexChange(pageIndex: number) {
        currentPage.value = pageIndex;
        methods.requestData();
      },

      convertDate(date:string) {
        let format = dayjs(date).format("YYYY年MM月DD日 HH:mm:ss");
        return format;
      },
      
      async requestData() {
        params.name = searchText.value;
        if (searchText.value === "") {
          params.name = undefined;
        }
        params.page = currentPage.value;
        params.pageSize = pageSize.value;
        const { code, msg, data } = await categoryList(params);

        if (code == 200) {
          //
          let res = data!;
          pageData.res = res;
          totalCount.value = res.total;
          console.log(respData);
          console.log(totalCount);
        } else {
          // 网络层已提示信息
          // console.log(msg);
        }
      },
      
      // async updateEmployeeState(id:string, status:number) {
      //   let param:CategoryListReqForm = {
      //     status:status,
      //     id:id
      //   }
      //   const { code, msg, data } = await categoryList(param);

      //   if (code == 200) {
      //     //
      //     ElMessage.success("状态修改成功");
      //     methods.requestData();
      //   } else {
      //     // 网络层已提示信息
      //     // console.log(msg);
      //   }
      // }
      
    };

    return {
      searchText,
      methods,
      pageData,
      currentPage,
      pageSize,
      totalCount,
      dialogFormVisible
    };
  },
});
</script>

<style>
.el-row {
  margin-bottom: 20px;
}
.pagination-block {
  padding-top: 16px;
}

el-col {
  display: flex !important;
}

</style>
